<template>
	<div>
		<div class="scheduleHeader">我的日程</div>
		<div class="schedulCont">
			<div class="arrange">
				<div class="arrangeHeader">本月日程安排</div>
				<div class="arrangeContent">
					<div>
						<span>果园管理<br />日程个数</span>
						<p>{{ scheduleArrange.numberOfOrchardManagementSchedule?scheduleArrange.numberOfOrchardManagementSchedule:0 }}</p>
					</div>
					<div>
						<span>专家技术<br />日程个数</span>
						<p>{{ scheduleArrange.numberOfExpertTechnicalSchedules?scheduleArrange.numberOfExpertTechnicalSchedules:0 }}</p>
					</div>

					<div>
						<span>产业工人<br />日程个数</span>
						<p>{{ scheduleArrange.numberOfIndustrialWorkersSchedule?scheduleArrange.numberOfIndustrialWorkersSchedule:0 }}</p>
					</div>
					<div>
						<span>自建<br />日程个数</span>
						<p>{{ scheduleArrange.numberOfSelfBuiltSchedules?scheduleArrange.numberOfSelfBuiltSchedules:0 }}</p>
					</div>
					<div>
						<span>月占比</span>
						<p>{{ scheduleArrange.monthlyProportion?scheduleArrange.monthlyProportion:0 }} %</p>
					</div>
					<div>
						<span>日程天数</span>
						<p>{{ scheduleArrange.calendarDays?scheduleArrange.calendarDays:0 }}</p>
					</div>
					<div>
						<span>已完成个数</span>
						<p>{{ scheduleArrange.numberOfCompleted?scheduleArrange.numberOfCompleted:0 }}</p>
					</div>
					<div>
						<span>总个数</span>
						<p>{{ scheduleArrange.theTotalNumberOf?scheduleArrange.theTotalNumberOf:0 }}</p>
					</div>
				</div>
			</div>
			<div class="centerContent">
				<div class="calenderBox">
					<calender ref="calender" :key="calenderKey"></calender>
				</div>
				<div class="scheduleList">
					<div class="scheduleListHeader">
						<div class="scheduleListHeaderText" :class="backlogIndex==0?'selectTexts':''" @click="backlogClick(0)">当日待办</div>
						<div class="scheduleListHeaderText" :class="backlogIndex==1?'selectTexts':''" @click="backlogClick(1)">新增日程</div>
						<div class="selectTextBar" :style="{left:`${backlogIndex * 18}%`}"></div>
					</div>
					<el-table :data="scheduleDataList" style="width: 100%" v-if="backlogIndex == 0">
						<el-table-column label="时间">
							<template slot-scope="scope">
								{{ `${scope.row.startDate} 至 ${scope.row.endDate}` }}
							</template>
						</el-table-column>
						<el-table-column label="日程来源" prop="scheduleSource"></el-table-column>
						<el-table-column prop="title" label="日程标题"></el-table-column>
						<el-table-column prop="scheduleAddress" label="日程地点"></el-table-column>
						<el-table-column prop="remarks" label="补充说明"></el-table-column>
						<el-table-column prop="remarks" label="操作">
							<template slot-scope="scope">
								<el-button type="text" @click="deleteSchedule(scope.row)" class="deleteBtn">删除日程</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="addSchedule" v-else>
						<div class="addScheduleHeader">添加日程、会议、活动等标题</div>
						<el-form label-width="80px" :model="addScheduleForm" size=" ">
							<el-form-item label="">
								<el-input v-model="addScheduleForm.title" placeholder="请输入日程、会议、活动等标题"></el-input>
							</el-form-item>
							<el-form-item label="日程时间">
								<el-date-picker v-model="addScheduleForm.scheduleDateTime" :disabled="addScheduleForm.allDay==1?true:false"
								 type="datetimerange" prefix-icon="el-icon-date" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss"
								 value-format="yyyy-MM-dd HH:mm:ss">
								</el-date-picker>
							</el-form-item>
							<el-form-item label="全天">
								<el-radio-group v-model="addScheduleForm.allDay" @change="allDaychange">
									<el-radio :label="1">是</el-radio>
									<el-radio :label="2">否</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="日程地点">
								<el-input v-model="addScheduleForm.scheduleAddress" placeholder="请输入日程地点"></el-input>
							</el-form-item>
							<el-form-item label="补充说明">
								<el-input v-model="addScheduleForm.remarks" resize="none" type="textarea" placeholder="请输入您需要说明的内容"></el-input>
							</el-form-item>
							<el-form-item label="">
								<div class="submitBtns">
									<el-button type="primary" @click="submitSchedule">确定添加</el-button>
								</div>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	import calender from './components/calendar.vue'
	export default {
		components: {
			calender
		},
		data() {
			return {
				scheduleDataList: [], // 日程列表
				scheduleArrange: '', // 日程安排
				userId: '',
				backlogIndex: 0,
				// 添加日程数据
				addScheduleForm: {
					userId: '',
					title: '',
					startDateTemp: '',
					endDateTemp: '',
					scheduleDateTime: [], // 时间段选择器数据
					allDay: 2, // 是否是全天日程 1是2否
					scheduleAddress: '',
					remarks: '',
					date: ''
				},
				calenderKey: ''
			}
		},
		created() {
			// 页面始化设置左边导航栏状态
			this.$store.commit('set_myManagementNavIndex', 12)

		},
		watch: {
			addScheduleForm: {
				handler: function(newData) {
					if (newData.allDay == 1) {
						let currentDate = this.$refs.calender.$data.currentDate
						// console.log(currentDate)
						newData.scheduleDateTime[0] = `${currentDate} 00:00:00`
						newData.scheduleDateTime[1] = `${currentDate} 23:59:59`
					}
				},
				deep: true
			},
			backlogIndex: function(newData) {
				if (newData == 0) {
					this.addScheduleForm.title = ''
					this.addScheduleForm.startDateTemp = ''
					this.addScheduleForm.endDateTemp = ''
					this.addScheduleForm.scheduleDateTime = []
					this.addScheduleForm.allDay = 2
					this.addScheduleForm.scheduleAddress = ''
					this.addScheduleForm.remarks = ''
				}
			}
		},
		mounted() {
			// this.addScheduleForm.userId
			let store = this.$store.state.user
			this.addScheduleForm.userId = store.userInfo.id
			this.addScheduleForm.date = this.$refs.calender.$data.currentDate
		},
		methods: {
			allDaychange(e) {
				if (e == 2) {
					this.addScheduleForm.scheduleDateTime = []
				}
			},
			backlogClick(i) {
				// 日程,待办日程切换
				this.backlogIndex = i
			},
			deleteSchedule(row) {
				// 删除日程
				this.$confirm('删除日程', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$request.postForm(this.$api.removeSchedule, {
						id: row.id,
						date: this.addScheduleForm.date
					}).then(res => {
						if (res.code == 200) {
							this.$message.success('删除成功')
							this.calenderKey = new Date().getTime()
							setTimeout(() => {
								this.addScheduleForm.date = this.$refs.calender.$data.currentDate

							}, 300)
							// this.$refs.calender.getScheduleByDay()
						}
					})
				})
			},
			submitSchedule() {
				// 提交新增日程
				if (this.verificationSchedule()) {
					if (this.addScheduleForm.allDay == 1) {
						let currentDate = this.$refs.calender.$data.currentDate
						// console.log(currentDate)
						this.addScheduleForm.scheduleDateTime[0] = `${currentDate} 00:00:00`
						this.addScheduleForm.scheduleDateTime[1] = `${currentDate} 23:59:59`
					}
					this.addScheduleForm.startDateTemp = this.addScheduleForm.scheduleDateTime[0]
					this.addScheduleForm.endDateTemp = this.addScheduleForm.scheduleDateTime[1]

					this.$request.postForm(this.$api.newSchedule, this.addScheduleForm).then(res => {
						if (res.code == 200) {
							this.$message.success('新增成功')
							this.backlogIndex = 0

							this.$refs.calender.getCurrentDate()
						}
					})
				}
			},
			verificationSchedule() {
				// 验证提交数据
				let data = this.addScheduleForm
				if (data.title == '') {
					this.$message.error('请输入日程标题')
					return false
				} else if (data.allDay == 2 && data.scheduleDateTime.length < 1) {
					this.$message.error('请选择日程时间段')
					return false
				} else if (data.scheduleAddress == '') {
					this.$message.error('请选择日程地点')
					return false
				} else {
					return true
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.scheduleHeader {
		width: 100%;
		height: 60px;
		border-bottom: 1px solid #DCDCDC;
		background: #FFFFFF;
		padding: 20px;
	}

	.schedulCont {
		padding: 20px;
		background: #F8F8F8;
	}
.deleteBtn{
		color: #F42929;
	}
	.centerContent {
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
		background: #FFFFFF;
	}

	.calenderBox {
		width: 380px;
		border-right: 1px solid #dedede;
	}

	.scheduleList {
		width: 500px;
		margin-right: 20px;
	}

	.scheduleListHeader {
		width: 100%;
		border-bottom: 1px solid #DCDCDC;
		padding: 20px 0;
		color: #333333;
		font-size: 0;
		position: relative;
	}

	.scheduleListHeaderText {
		font-size: 16px;
		display: inline-block;
		width: 18%;
		font-weight: bold;
		cursor: pointer;
		text-align: center;
	}

	.selectTexts {
		color: #23B14D;
	}

	.selectTextBar {
		position: absolute;
		width: 18%;
		height: 2px;
		background: #23B14D;
		left: 0;
		bottom: -1px;
		transition: left .2s;
	}

	.arrange {
		width: 100%;
		background: #FFFFFF;
		margin-bottom: 20px;
	}

	.arrangeHeader {
		font-size: 20px;
		color: #333333;
		font-weight: 400;
		padding: 15px 20px;
		border-bottom: 1px solid #DCDCDC;
	}

	.arrangeContent {
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
		text-align: center;
		align-items: flex-end;
		padding: 20px;
	}

	.arrangeContent span {
		color: #808080;
		font-size: 12px;
	}

	.arrangeContent p {
		color: #333333;
		font-size: 24px;
		margin-top: 20px;
	}

	.addScheduleHeader {
		width: 100%;
		padding: 15px 0;
		color: #333333;
		font-size: 14px;
	}

	.el-date-editor--datetimerange.el-input__inner {
		width: 100%;
	}

	.submitBtns {
		text-align: center;
	}

	.addSchedule>>>textarea.el-textarea__inner {
		height: 140px !important;
	}
</style>
